<template>
  <el-dialog :visible.sync="accountingCalendarDialog" :close-on-click-modal="false" :before-close="accountingCalendarCancel" :fullscreen="accountingCalendarDialog" @close="accountingCalendarCancel">
    <div>
      <el-card class="_calendar">
        <el-container>

          <el-main width="45%">
            <el-card>
              <el-calendar v-model="valueDate" :first-day-of-week="7">
                <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                <template slot="dateCell" slot-scope="{date, data}">
                  <div slot="reference" class="div-Calendar" @click="calendarOnClick(data)">
                    <p :class="data.isSelected ? 'is-selected' : ''">
                      {{ data.day.split('-').slice(1).join('-') }}
                      <i :class="[data.isSelected ?'el-icon-check':'']" />
                      <br><br>
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ dealMyDate(data.day) }}
                    </p>
                  </div>
                </template>
              </el-calendar>
            </el-card>
          </el-main>

          <el-aside width="55%" style="overflow: hidden;">
            <el-card>
              <div class="el-calendar__header">
                <div class="el-calendar__title">收费明细</div>
                <div class="el-calendar__button-group">
                  <div class="el-button-group">
                    <button
                      type="primary"
                      class="el-button el-button--plain el-button--mini"
                      @click="crud.toAdd"
                    >
                      单独记账
                    </button>
                    <button
                      type="primary"
                      class="el-button el-button--plain el-button--mini"
                      @click="addFix"
                    >
                      固费记账
                    </button>
                  </div>
                </div>
              </div>
              <div class="calendar-info">
                <el-table
                  ref="table"
                  v-loading="crud.loading"
                  :data="crud.data"
                  size="small"
                  style="width: 100%;"
                  @selection-change="crud.selectionChangeHandler"
                >
                  <el-table-column prop="bisFymxMc" label="项目名称" />
                  <el-table-column prop="bisFymxDj" label="单价" />
                  <el-table-column prop="bisFymxSl" label="数量" />
                  <el-table-column prop="bisFymxZj" label="总价" />
                  <el-table-column prop="lrsj" label="录入时间" width="150px" />
                  <el-table-column v-if="checkPer(['admin','fymx:edit','fymx:del'])" label="操作" width="150px" align="center">
                    <template slot-scope="scope">
                      <udOperation
                        :data="scope.row"
                        :permission="permission"
                      />
                    </template>
                  </el-table-column>
                </el-table>
                <!--分页组件-->
                <pagination />
              </div>
            </el-card>
          </el-aside>
        </el-container>
      </el-card>
    </div>

    <!--表单组件-->
    <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
        <el-form-item label="项目" prop="bisFixedCostsMc">
          <el-select
            v-model="form.bisFymxMc"
            style="width: 270px"
            placeholder="请选择"
            @change="seletChange"
          >
            <el-option
              v-for="item in allHljgYmk"
              :key="item.bisYmkdzYbmc"
              :label="item.bisYmkdzYbmc"
              :value="item.bisYmkdzYbmc"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="开方日期">
          <el-input v-model="form.bisFymxKfrq" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="单价">
          <el-input-number v-model="form.bisFymxDj" :precision="2" :step="0.01" :max="form.bisFymxDj" style="width: 150px;" />
        </el-form-item>
        <el-form-item label="数量" prop="bisFymxSl">
          <el-input v-model="form.bisFymxSl" style="width: 370px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>
<script>
import crudFymx from '@/api/business/fymx'
import { queryAllHljgYmk } from '@/api/business/ymkdz'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import moment from 'moment'

const defaultForm = { bisFymxId: null, bisFymxJzdjId: null, bisFymxJzdjLsh: null, bisFymxYbkh: null, bisFymxYjlx: null, bisFymxYyypbm: null, bisFymxCfh: null, bisFymxKfrq: null, bisFymxYbypbm: null, bisFymxMc: null, bisFymxDj: null, bisFymxSl: null, bisFymxZj: null, bisFymxJx: null, bisFymxJl: null, bisFymxSypc: null, bisFymxYf: null, bisFymxZxks: null, bisFymxZxts: null, bisFymxYbsflb: null, bisFymxSpr: null, bisFymxZdxmjkm: null, bisFymxYsxm: null, bisFymxJbr: null, bisFymxYysflb: null, bisFymxDw: null, bisFymxGg: null, bisFymxCfybz: null, bisFymxBzsl: null, bisFymxYl: null, bisFymxYpdzjgm: null, ywlx: null, lrr: null, lrrxm: null, lrbm: null, lrbmmc: null, lrsj: null, gxr: null, gxrxm: null, gxbm: null, gxbmmc: null, gxsj: null, sfyx: null, bz: null, bisFymxGrbh: null, bisFymxSfsc: null }
export default {
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: '记账', url: 'api/fymx', idField: 'bisFymxId', sort: 'lrsj,desc', crudMethod: { ...crudFymx }})
  },
  data: function() {
    return {
      valueDate: new Date(),
      accountingCalendarDialog: false,
      allHljgYmk: [],
      jzid: '',
      zxks: '',
      ysxm: '',
      grbh: '',
      ybkh: '',
      jzlsh: '',
      ryrq: '',
      todayAnonymous: '',
      permission: {
        add: ['admin', 'fymx:add'],
        edit: ['admin', 'fymx:edit'],
        del: ['admin', 'fymx:del']
      },
      rules: {
        bisFymxSl: [
          { required: true, message: '数量不能为空', trigger: 'blur' }
        ]
      },
      isArrange: [
        '2020-06-08',
        '2020-06-09',
        '2020-06-10',
        '2020-06-11',
        '2020-06-17',
        '2020-06-18'
      ],
      resDate: [
        { 'date': '2022-08-20', 'content': '67.9元' },
        { 'date': '2022-08-26', 'content': '88.3元' },
        { 'date': '2022-08-23', 'content': '160元' }
      ]
    }
  },
  created: function() {
  },
  mounted: function() {
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return this.accountingCalendarDialog
    },
    // 初始化编辑时候的角色与岗位
    [CRUD.HOOK.beforeToEdit](crud, form) {
      this.queryAllHljgYmk()
    },
    // 初始化编辑时候的角色与岗位
    [CRUD.HOOK.beforeToAdd](crud, form) {
      this.queryAllHljgYmk()
    },
    // 初始化编辑时候的角色与岗位
    [CRUD.HOOK.afterSubmit](crud, form) {
      this.groupByKfrq2Zj()
    },
    /**
     * 点击删除之前校验
     * @param crud
     * @param form
     * @returns {boolean}
     */
    [CRUD.HOOK.beforeDelete](crud, form) {
      var bisFymxSfsc = form.bisFymxSfsc
      if (bisFymxSfsc === '1') {
        this.$notify({
          title: '费用明细已上传，无法删除。请到出院结算页面【撤销并删除】执行删除操作',
          type: 'warning',
          duration: 2500
        })
        return false
      } else {
        return true
      }
    },
    accountingCalendarCancel() {
      this.accountingCalendarDialog = false
    },
    // 点击日期块
    calendarOnClick(e) {
      const selectedDate = moment(e.day).format('YYYYMMDD')
      this.query.bisFymxKfrq = selectedDate
      this.form.bisFymxKfrq = selectedDate
      console.log(this.form.bisFymxKfrq)
      this.crud.toQuery()
      this.$notify.info({
        title: '选择日期为',
        message: e.day,
        position: 'top-left'
      })
    },
    // 点击信息块
    infoOnClick() {
    },
    // 新增排班
    saveOnClick() {
    },
    // 删除排班
    infoDel() {
      this.$confirm('此操作将永久删除该排班, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 获取所有机构服务项目
    queryAllHljgYmk() {
      queryAllHljgYmk().then(res => {
        this.allHljgYmk = res
      }).catch(() => { })
    },
    // 获取选中的对象
    seletChange(val) {
      // 选中的数据和options进行匹配
      var obj = {}
      obj = this.allHljgYmk.find(function(i) {
        return i.bisYmkdzYbmc === val
      })
      const that = this
      // 在change中获取到整条对象数据
      this.form.bisFymxDj = obj.bisYmkdzDj
      this.form.bisFymxYyypbm = obj.bisYmkdzYbbm
      this.form.bisFymxYbypbm = obj.bisYmkdzYbbm
      this.form.bisFymxJx = obj.bisYmkdzJx
      this.form.bisFymxJl = obj.bisYmkdzJl
      this.form.bisFymxSypc = obj.bisYmkdzSypc
      this.form.bisFymxYf = obj.bisYmkdzYf
      this.form.bisFymxYl = obj.bisYmkdzYl
      this.form.bisFymxZxts = obj.bisYmkdzZxts
      this.form.bisFymxDw = obj.bisYmkdzDw
      this.form.bisFymxGg = obj.bisYmkdzGg
      this.form.bisFymxYbsflb = obj.bisYmkdzFwlx
      this.form.bisFymxYysflb = obj.bisYmkdzFwlx

      const date = moment(that.valueDate).format('YYYYMMDD')

      this.form.bisFymxKfrq = date
      this.form.bisFymxZxks = that.zxks
      this.form.bisFymxJzdjId = that.jzid
      this.form.bisFymxJzdjLsh = that.jzlsh
      this.form.bisFymxYbkh = that.ybkh
      this.form.bisFymxGrbh = that.grbh
      this.form.bisFymxYsxm = that.ysxm
      this.form.bisFymxJbr = that.ysxm
      this.form.bisFymxSpr = that.ysxm
    },
    test() {
      this.$nextTick(() => {
        const that = this
        // 点击前一个月
        const prevBtn = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:nth-child(1)'
        )
        prevBtn.addEventListener('click', e => {
          const date = moment(this.valueDate).format('YYYYMMDD')
          const viewdate = moment(this.valueDate).format('YYYY-MM-DD')
          this.query.bisFymxKfrq = date
          this.crud.toQuery()
          this.$notify.info({
            title: '上一月',
            message: '上个月头天：' + viewdate,
            position: 'top-left'
          })
        })

        // 点击下一个月
        const nextBtn = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:nth-child(3)'
        )
        nextBtn.addEventListener('click', () => {
          const date = moment(this.valueDate).format('YYYYMMDD')
          const viewdate = moment(this.valueDate).format('YYYY-MM-DD')
          this.query.bisFymxKfrq = date
          this.crud.toQuery()
          this.$notify.info({
            title: '下一月',
            message: '下个月头天：' + viewdate,
            position: 'top-left'
          })
        })

        // 点击今天
        const todayBtn = document.querySelector(
          '.el-calendar__button-group .el-button-group>button:nth-child(2)'
        )
        todayBtn.addEventListener('click', function foonumber() {
        //  that.todayAnonymous = arguments.callee
          that.todayFunction()
        })
      })
    },
    todayFunction() {
      const date = moment(this.valueDate).format('YYYYMMDD')
      const viewdate = moment(this.valueDate).format('YYYY-MM-DD')
      this.query.bisFymxKfrq = date
      this.crud.toQuery()
      this.$notify.info({
        title: '今天',
        message: '今天：' + viewdate,
        position: 'top-left'
      })
    },
    dealMyDate(v) {
      const len = this.resDate.length
      let res = ''
      for (let i = 0; i < len; i++) {
        if (this.resDate[i].kfrq === v) {
          res = this.resDate[i].content + '元'
          break
        }
      }``
      return res
    },
    // 获取所有机构服务项目
    groupByKfrq2Zj() {
      crudFymx.groupByKfrq2Zj(this.jzid).then(res => {
        console.log('-=-=-=-=-=-=-=-=', res)
        this.resDate = res
      }).catch(() => { })
    },
    // 固费记账
    async addFix() {
      if (this.form.bisFymxKfrq === '' || this.form.bisFymxKfrq === null || this.form.bisFymxKfrq === undefined) {
        this.$notify({
          title: '请选择开方日期',
          type: 'warning',
          duration: 2500
        })
        return
      }
      if (moment(this.form.bisFymxKfrq).isBefore(this.ryrq)) {
        this.$notify({
          title: '开方日期[' + this.form.bisFymxKfrq + ']不可以在入院日期[' + this.ryrq + ']之前',
          type: 'warning',
          duration: 2500
        })
        return
      }
      this.form.bisFymxJzdjId = this.jzid
      await crudFymx.addFix(this.form).then(res => {
        this.crud.toQuery()
        this.groupByKfrq2Zj()
      }).catch(() => { })
    }
  }
}
</script>
<style scoped>

.is-selected {
  color: #1989fa;
}
.p-popover {
  text-align: center;
}
._calendar {
  height: 99.5%;
  width: 100%;
}
.el-main {
  padding: 0px;
  overflow: hidden;
}
.calendar-info {
  height: 94%;
}
.el-alert {
  margin: 15px 0px;
}
.el-alert:hover {
  transform: scale(1.02);
}
.el-alert:active {
  transform: scale(1.01);
}
</style>
<style >
._calendar .div-Calendar {
  height: 80px;
  box-sizing: border-box;
  padding: 8px;
  font-size: 12px;
}
._calendar .el-calendar-table .el-calendar-day {
  padding: 0px;
  height: 125px;
}
._calendar .el-container,
._calendar .el-calendar {
  height: 100%;
}
._calendar .el-card__body {
  padding: 0px;
}
</style>
<style>
</style>
